﻿<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
    html, body, #container {
        height: 100%;
        width: 100%;
    }

    .input-card .btn {
        margin-right: 1.2rem;
        width: 9rem;
    }

        .input-card .btn:last-child {
            margin-right: 0;
        }
</style>
<div id="container"></div>
<div class="input-card">
    <h4>轨迹回放控制</h4>
    <div class="input-item">
        <input type="button" class="btn" value="开始动画" id="start" />
        <input type="button" class="btn" value="暂停动画" id="pause" />
    </div>
    <div class="input-item">
        <input type="button" class="btn" value="继续动画" id="resume" />
        <input type="button" class="btn" value="停止动画" id="stop" />
    </div>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=8ac09b146368145790ddaee60080d0b2"></script>
<script src="~/Content/lib/common.js"></script>
<script>
    layui.use(['jquery', 'layer'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var marker, lineArr, lineBegin, lineCenter;
        $.ajax({
            url: 'GPSData',
            data: {},
            async: false,
            success: function (res) {
                if (res.count > 0) {
                    lineArr = res.data;
                    lineBegin = res.data[0];
                    lineCenter = [FloatDiv(FloatAdd(res.data[0][0],res.data[res.data.length - 1][0]),2),FloatDiv(FloatAdd(res.data[0][1],res.data[res.data.length - 1][1]),2)];
                }
                else {
                    layer.msg("未获取到GPS数据");
                }
            }
        });

        var map = new AMap.Map("container", {
            resizeEnable: true,
            //center: lineCenter,
            zoom: 17
        });

        marker = new AMap.Marker({
            map: map,
            position: lineBegin,
            icon: "https://webapi.amap.com/images/car.png",
            offset: new AMap.Pixel(-26, -13),
            autoRotation: true,
            angle: -90,
        });

        // 绘制轨迹
        var polyline = new AMap.Polyline({
            map: map,
            path: lineArr,
            showDir: true,
            strokeColor: "#28F",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid"  //线样式
        });

        var passedPolyline = new AMap.Polyline({
            map: map,
            // path: lineArr,
            strokeColor: "#AF5",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid"  //线样式
        });

        marker.on('moving', function (e) {
            //console.log(e)
            passedPolyline.setPath(e.passedPath);
        });

        map.setFitView();

        $("#start").click(function () {
            marker.moveAlong(lineArr, 500);
        })
        $("#pause").click(function () {
            marker.pauseMove();
        })
        $("#resume").click(function () {
            marker.resumeMove();
        })
        $("#stop").click(function () {
            marker.stopMove();
        })
    })
</script>